<template>
  <div>
    <!-- table数据展示 start -->
    <el-row>
      <el-col :span="24">
        <el-table
          ref="age-table"
          empty-text
          fit
          size="mini"
          :span-method="objectSpanMethod"
          :data="tableData">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.location.locationcode')" width="150"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU" width="150"></el-table-column>
          <template v-if="getInventoryDetail().stockway===2">
            <el-table-column align="center" prop="productstocksum" :label="$t('m.inventory.productstocksum')"></el-table-column>
          </template>
          <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
          <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" width="200"></el-table-column>

        </el-table>
      </el-col>
    </el-row>
    <!-- table数据展示 end -->
  </div>
</template>
<script>
export default {
  name:'inventory-location-table',
  data(){
    return {
      tableData:[],
      getMergeRows:[]
    }
  },
  inject:{
    getInventoryDetail:{
      default:()=>{}
    }
  },
  mounted(){
    if(this.getInventoryDetail()){
      this.tableData = this.getInventoryDetail().initialStockTakeDetailOutputList
      this.tableData.sort((prev,cur)=>{
        if(prev.locationid < cur.locationid) return 1
        else if(prev.locationid > cur.locationid) return -1
        else return 0
      })
    } else {
      this.getData()
    }
  },
  watch:{
    tableData:{
      handler(){
        let __index = 0
        let code = ''
        this.getMergeRows = []
        this.tableData.forEach((item,index)=>{
          if(!item.locationcode){
            this.getMergeRows.push(1)
          } else if(item.locationcode !== code){
            this.getMergeRows.push(1)
            code = item.locationcode
            __index = index
          } else {
            if(code){
              ++this.getMergeRows[__index]
              this.getMergeRows.push(0)
            }
          }
        })
      }
    }
  },
  methods:{
    getData(){
      let options = {
        method:'get',
        url:`/initialstocktake/getlsinfosfa`
      }
      this.$axios(options).then(({ data }) => {
        if(!data.length) this.callbackMessage(this.$t('m.inventory.nodetail'))
        this.tableData = data.sort((prev,cur)=>{
          if(prev.locationid < cur.locationid) return 1
          else if(prev.locationid > cur.locationid) return -1
          else return 0
        })
      })
    },
    // 表格缩进
    objectSpanMethod({ rowIndex, columnIndex }){
      let MergeArr = []
      if (MergeArr.includes(columnIndex)){
        if(!this.getMergeRows.length){
          return {
            rowspan:1,
            colspan:1
          }
        } else {
          return {
            rowspan:this.getMergeRows[rowIndex],
            colspan:this.getMergeRows[rowIndex] ? 1 : 0
          }
        }
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.el-table{margin-bottom: 20px;}
</style>